<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layui
      th:replace="pages/common/main :: layout(~{::title}, ~{::section}, ~{::link}, ~{::script})">
    <head>
        <title>setting</title>
        <link rel="stylesheet" th:href="@{/assets/expand/module/dtree/dtree.css}">
        <link rel="stylesheet" th:href="@{/assets/expand/module/dtree/font/dtreefont.css}">
    </head>
    <body>
        <section>

            <div class="layui-fluid">

                <script type="text/html" id="toolBar">
                    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="create" layui:auth="/sys/setting/save">
                        <i class="layui-icon layui-icon-file-b">新建项目</i>
                    </a>
                    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="deleteBatch" layui:auth="/sys/setting/batch-delete">
                        <i class="layui-icon layui-icon-delete">批量删除</i>
                    </a>
                </script>

                <script type="text/html" id="tool">
                    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" layui:auth="/sys/setting/detail">查看</a>
                    <a class="layui-btn layui-btn-xs" lay-event="update" layui:auth="/sys/setting/save">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete" layui:auth="/sys/setting/delete">删除</a>
                </script>

                <script type="text/html" id="activeTpl">
                    {{# if (d.active === 1) { }}
                    <input type="checkbox" checked lay-skin="switch" lay-text="开启|关闭" lay-filter="switch-filter"
                           data-id="{{d.id}}"/>
                    {{# } else { }}
                    <input type="checkbox" lay-skin="switch" lay-text="开启|关闭" lay-filter="switch-filter"
                           data-id="{{d.id}}"/>
                    {{# } }}
                </script>

                <script type="text/html" id="iconTpl">
                    <i class="layui-icon {{d.icon}}"></i>
                </script>

                <div class="layui-card">
                    <div class="layui-card-body">
                        <table id="setting-table" lay-filter="setting-table-filter"></table>
                    </div>
                </div>

            </div>

        </section>

        <script th:inline="javascript">

            layui.use(["gridTree", "form", "ax", "dtree", "jquery"], function () {
                var grid = layui.gridTree,
                    form = layui.form,
                    $ax = layui.ax,
                    $ = layui.jquery;

                var SETTING = {}
                    , col = [

                    {type: "numbers"},
                    {type: "checkbox"},
                    {sort: true, field: "title", edit: "text", title: "名称"},
                    {hide: true, field: "id", title: "记录ID"},
                    {width: 150, field: "url", edit: "text", title: "链接"},
                    {
                        width: 100, align: "center", field: "position", title: "位置", templet: function (d) {
                            var options = /*[[${positionLabels}]]*/{}
                            return Kong.genLabel(d.position, options)
                        }
                    },
                    {
                        width: 100, align: "center", field: "type", title: "类型", templet: function (d) {
                            var options = /*[[${typeLabels}]]*/{}
                            return Kong.genILabel(d.type, options)
                        }
                    },
                    {width: 60, align: "center", field: "icon", title: "图标", templet: "#iconTpl"},
                    {width: 80, align: "center", edit: "text", sort: true, field: "sort", title: "排序"},
                    {width: 100, align: "center", field: "active", title: "激活", templet: "#activeTpl", event: "active"},
                    {width: 170, toolbar: "#tool", title: "操作"}
                ];

                SETTING.table = {
                    tree: {
                        iconIndex: 2,           // 折叠图标显示在第几列
                        isPidData: true,        // 是否是id、pid形式数据
                        idName: 'id',  // id字段名称
                        pidName: 'pid'     // pid字段名称
                    },
                    height: "full-98",
                    cols: [col],
                    // url: "",
                    data: /*[[${data}]]*/[]
                };

                SETTING.eventOptions = {
                    create: {
                        url: "/sys/setting/form"
                    },
                    deleteBatch: {
                        url: "/sys/setting/batch-delete"
                    },
                    update: {
                        url: "/sys/setting/form"
                    },
                    delete: {
                        url: "/sys/setting/delete"
                    }
                }


                var options = {
                        tableId: "setting-table",
                        tableFilter: "setting-table-filter",
                        table: SETTING.table,
                        editor: {
                            url: Kong.ctxPath + "/sys/setting/edit"
                        },
                        eventOptions: SETTING.eventOptions
                    },
                    events = {};


                grid.render(options, events);

                form.on("switch(switch-filter)", function (data) {
                    var id = data.elem.getAttribute("data-id")
                    var ajax = new $ax(Kong.ctxPath + "/sys/setting/edit", function (data) {
                        Kong.success("修改成功！")
                    })
                    ajax.setDataDataValue("active", data.elem.checked ? 1 : 0)
                    ajax.setDataConditionValue("id", id)
                    ajax.sendJson()
                });

                /*var dtree = layui.dtree;
                dtree.render({
                    elem: "#setting-pid",
                    width: "100%",
                    data: /!*[(${pidLabels})]*!/[],
                    selectInputName: {nodeId: "pid"},
                    select: true
                });*/

            });

        </script>


    </body>
</html>
